<template>
  <div class="root-layout">
    <img class="close-iv" src="@/static/icon_close.png" alt="" @click="close" />
    <div class="iamge-layout">
      <img class="image" :src="headUrl" alt="" />
    </div>
    <!-- 更换头像 -->
    <div class="button-layout">
      <div class="button" @click="change()">
        <view>更换头像</view>
        <view>(请选择3M以内图片)</view>
      </div>
    </div>
    <!-- 选择头像 -->
    <u-popup v-if="showSelectWindow" :show="showSelectWindow" mode="bottom" bgColor="transparent"
      @close="showSelectWindow = false">
      <SelectPicWindow v-if="showSelectWindow" :img-bsn-no="imgBsnNo" @close="showSelectWindow = false" @changeImage="changeImage"></SelectPicWindow>
    </u-popup>
  </div>
</template>

<script>
import { tr } from '@dcloudio/vue-cli-plugin-uni/packages/postcss/tags'
import SelectPicWindow from '../../../components/windows/SelectPicWindow.vue'

export default {
  components: {
    SelectPicWindow
  },
  props: {
    headUrl: {
      type: String,
      default: () => '@/static/icon_default_head.png'
    },
    imgBsnNo: {
      type: String,
      default: () => ''
    }
  },
  data() {
    return {
      showSelectWindow: false,
      changeData: {

      },
    }
  },
  methods: {
    close() {
      this.$emit("close")
    },
    change() {
      this.showSelectWindow = true
    },
    changeImage(data) {
      this.changeData = {...data}
      this.showSelectWindow = false
    },
  },
  watch:{
    changeData: {
      handler() {
       this.$emit('changeImage', this.changeData)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.root-layout {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;


  .close-iv {
    width: 25px;
    height: 25px;
    padding: 10px;
  }

  .iamge-layout {
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .image {
      width: 100%;
    }
  }

  .button-layout {
    flex: 1;
    display: flex;
    flex-direction: columns;
    align-items: center;
    justify-content: center;

    .button {
      display: flex;
      flex-direction: column;
      background: #f05f5d;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      padding: 10px;
      color: white;
    }
  }
}
</style>